<template>
  <div :class="{ 'chang-pwd': true, 'onFocus': focusFlag }">
    <x-header class="myHeader" :left-options="{ backText: '' }">
      <span>修改密码</span>
    </x-header>
    <div class="page-content">
      <div class="user-header mt10">
        <img :src="(userInfo && userInfo.photo) ? `${__ctx}/sys/sysFile/download?fileId=${userInfo.photo}` : imgUrl" />
        <div class="user-info-title">
          <p>
            {{ userInfo && userInfo.fullname }}
          </p>
          <span>账号：{{ userInfo && userInfo.account }}</span>
        </div>
      </div>
      <div class="myGroup">
        <div class="myGroup-item">
          <el-input v-model="oldPassword" placeholder="请输入原密码" show-password></el-input>
        </div>
        <div class="myGroup-item">
          <el-input v-model="newPassword" placeholder="请输入新密码" show-password></el-input>
        </div>
        <div class="block-list" v-if="blockNum">
          <div v-for="(item, index) in blockNum" :key="index"
            :class="['block-item', isWeek ? 'bgcRed' : isMid ? 'bgcYel' : isStrong ? 'bgcGre' : '']"></div>
          <span :class="[isWeek ? 'weak' : isMid ? 'mid' : isStrong ? 'strong' : '']">
            {{ isWeek ? '弱' : isMid ? '中' : isStrong ? '强' : '' }}
          </span>
        </div>
        <div class="tip">
          <img class="warning" />
          <div class="waring-char">
            <span class="yel">6-20位密码，包含英文大小写、数字和特殊字符</span>
          </div>
        </div>
        <div class="myGroup-item">
          <el-input v-model="newPassword1" placeholder="请再次输入新密码" show-password></el-input>

        </div>
        <van-button round block type="info" @click.native="btnClick">提交</van-button>
      </div>
    </div>

  </div>
</template>

<script>
import { XHeader, XButton } from "vux";
import commonJS from "@/assets/js/common.js"
export default {
  components: {
    XHeader,
    XButton
  },
  data() {
    return {
      focusFlag: false,
      userInfo: null,
      oldPassword: null,
      newPassword: null,
      newPassword1: null,
      imgUrl: require("../../assets/user/user.svg"),
      isEye: false,
      isStrong: false,
      isWeek: false,
      isMid: false,
      blockNum: 0,
    };
  },
  created() {
    this.userInfo = this.$route.params.user;
  },
  mounted() {
    // 输入框获取焦点时，手机输入键盘抬起与放下
    commonJS.inputKeyboard()
  },
  methods: {
    checkNew(value) {
      if (this.newPassword1 && value != this.newPassword1) {
        this.$vux.toast.show({
          type: "warn",
          width: "60vw",
          text: '<p style="font-size:0.5rem">新密码需要跟确认密码一样！</p>'
        });
        return { valid: false, msg: "新密码需要跟确认密码一样！" };
      } else {
        return { valid: true };
      }
    },
    checkNew1(value) {
      if (this.newPassword1 && value != this.newPassword) {
        this.$vux.toast.show({
          type: "warn",
          width: "60vw",
          text: '<p style="font-size:0.5rem">新密码需要跟确认密码一样！</p>'
        });
        return { valid: false, msg: "确认密码需要跟新密码一样！" };
      } else {
        return { valid: true };
      }
    },
    btnClick() {
      if (this.oldPassword == this.newPassword) {
        return this.$vux.toast.show({
          type: "warn",
          width: "60vw",
          text: '<p style="font-size:0.5rem">新密码和原密码不能一致！</p>'
        });
      }
      if (!this.oldPassword && !this.newPassword && !this.newPassword1) {
        return this.$vux.toast.show({
          type: "warn",
          width: "60vw",
          text: '<p style="font-size:0.5rem">请填写修改密码信息！</p>'
        });
      }
      let _valid = this.checkNew(this.newPassword);
      let _valid1 = this.checkNew1(this.newPassword1);
      if (this.oldPassword && _valid.valid && _valid1.valid) {
        let defer = this.baseService.postForm(
          this.__ctx + "/org/user/updateUserPassWorld",
          {
            id: this.userInfo.id,
            oldPassword: this.oldPassword,
            newPassword: this.newPassword
          }
        );
        defer.then(data => {
          if (data.isOk) {
            let _this = this;
            this.$vux.toast.show({
              width: "60vw",
              text:
                '<p style="font-size:0.5rem">' + data.msg ||
                "修改成功" + "</p>",
              onHide() {
                _this.$router.back(-1);
              }
            });
          } else {
            this.$vux.toast.show({
              type: "warn",
              width: "60vw",
              text: '<p style="font-size:0.5rem">' + data.msg + "</p>"
            });
          }
        });
      }
    },
  },
  watch: {
    newPassword(n, o) {
      let reg0 = /^(\d{6,20})|([a-z]{6,20})|([A-Z]{6,20})$/;
      let reg1 = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
      let reg2 = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,20}/;

      if (reg0.test(n)) {
        this.isWeek = true;
        this.isMid = false;
        this.isStrong = false;
      }
      if (reg1.test(n)) {
        this.isWeek = false;
        this.isMid = true;
        this.isStrong = false;
      }
      if (reg2.test(n)) {
        this.isWeek = false;
        this.isMid = false;
        this.isStrong = true;
      }
      if (n.length == 0) {
        this.isWeek = false;
        this.isMid = false;
        this.isStrong = false;
      }
      if (this.isWeek) this.blockNum = 1
      if (this.isMid) this.blockNum = 2
      if (this.isStrong) this.blockNum = 3
      if (!this.isWeek && !this.isMid && !this.isStrong) this.blockNum = 0
    }
  }
};
</script>

<style scoped lang="less">
.user-header {
  display: flex;
  flex-direction: row;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
  align-items: center;

  img {
    margin-left: 0.4rem;
    width: 1rem;
    height: 1rem;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #fff;
  }

  .user-info-title {
    margin-left: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.4rem;

    p {
      font-size: 0.5rem;
    }
  }
}

.myGroup {
  padding: 0 30px;

  .block-list {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .block-item {
      width: calc(~"30% ");
      height: 0.6rem;
      margin-right: 20px;
    }

    .fs20 {
      font-size: 20px;
    }

    .bgcRed {
      background-color: #dc3019;
    }

    .bgcYel {
      background-color: #ffd92b;
    }

    .bgcGre {
      background-color: #0edf51;
    }

    .weak {
      color: #dc3019;
    }

    .mid {
      color: #ffd92b;
    }

    .strong {
      color: #0edf51;
    }

    .strong-color {
      background-color: #0edf51;
      width: 30%;
      height: 0.3rem;
      margin-left: 0.3rem;
    }
  }

  .tip {
    background-color: #fff0bf;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;

    .warning {
      content: url(../../assets/xc-zhuyi.png);
      width: 0.8rem;
      vertical-align: middle;
      padding: 0.1rem;
      margin-right: 5px;
    }

    .yel {
      color: #D79C11;
    }

    .waring-char {
      display: flex;

      span {
        font-size: 0.3rem;
      }
    }
  }

  .myGroup-item {
    margin: 2vh 0;
  }
}

.process-img {
  float: left;
  content: url(../../assets/u42.svg);
}

.chang-pwd {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100vh;
  // z-index: 1000;
  background: #fbf9fe;

  &.onFocus {
    z-index: 1000;
  }
}
</style>
